<template>
  <div class="appp">
    <dv-full-screen-container>
      <div class="warrper">
        <div>
          <to-head :title="title" :time="time" />
        </div>
        <div class="bnr-con">
          <a-row :gutter="16" style="height:100%">
            <a-col :span="4" style="height:100%">
              <div class="box-border eqList" style="height:100%">
                <div class="tit">设备列表</div>
                <div v-for="(item, index) in eqList" :key="index">
                  <p class="left" :class="{ runing: item.isRuning }">
                    <span class="icon2">
                      <!-- #21ffb3 -->
                      <a-icon
                        :style="{ color: selectColor(item.state) }"
                        type="codepen-circle"
                      ></a-icon
                    ></span>
                    <span :style="{ color: selectColor(item.state) }">{{
                      item.name
                    }}</span>
                  </p>
                </div>
              </div>
            </a-col>
            <a-col :span="20">
              <a-row :gutter="16" class="up bg-color-black2">
                <a-col :span="18" style="height:100%">
                  <calend :eqname="sname"></calend>
                </a-col>
                <a-col :span="6" style="height:100%"
                  ><eq-info
                    :eqname="eqname"
                    :description="description"
                  ></eq-info
                ></a-col>
              </a-row>
              <a-row :gutter="16" class="down bg-color-black2">
                <a-col :span="6" style="height:100%">
                  <div class="box-border">
                    <div class="tit">设备运行状态</div>
                    <eq-state :state="state"></eq-state>
                  </div>
                </a-col>
                <a-col :span="6" style="height:100%">
                  <div class="box-border">
                    <div class="tit">设备利用率</div>
                    <eq-runing :eqDetail="eqDetail"></eq-runing>
                  </div>
                </a-col>
                <a-col :span="6" style="height:100%">
                  <div class="box-border">
                    <!-- <p class="tit">设备利用率</p> -->
                    <div class="name">
                      <p>
                        <span>当前设备名称：</span>
                        <span class="hwname">{{
                          eqDetail ? eqDetail.name : ''
                        }}</span>
                      </p>
                      <p>
                        <span>今日运行时长：</span
                        ><span class="hwname">{{
                          eqDetail ? eqDetail.yxsc : ''
                        }}</span>
                      </p>
                      <p>
                        <span>当前测试项目：</span
                        ><span class="hwname"
                          >{{ eqDetail ? eqDetail.csxm : '' }}
                        </span>
                      </p>
                      <p>
                        <span>周设备利用率：</span>
                        <span class="hwname">{{
                          eqDetail ? eqDetail.week_oee : ''
                        }}</span>
                      </p>
                      <p>
                        <span>月设备利用率：</span>
                        <span class="hwname">{{
                          eqDetail ? eqDetail.month_oee : ''
                        }}</span>
                      </p>
                    </div>
                  </div>
                </a-col>
                <a-col :span="6" style="height:100%"><person></person></a-col>
              </a-row>
            </a-col>
          </a-row>
        </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
import ToHead from './components/autoeq/ToHead.vue'
import { sysQuery } from './api/dataApi'
import EqRuning from './components/autoeq/EqRuning.vue'
import EqInfo from './components/autoeq/EqInfo.vue'
import Calend from './components/autoeq/Calend.vue'
import Person from './components/autoeq/Person.vue'
import EqState from './components/autoeq/EqState.vue'

export default {
  name: 'App',
  components: {
    ToHead,
    EqInfo,
    Calend,
    Person,
    EqRuning,
    EqState,
  },
  data() {
    return {
      title: '博耐尔试验中心',
      eqList: [],
      bjData: [],
      pageIndex: 1,
      eqname: '',
      description: '',
      timeInterval: null,
      sname: '',
      eqDetail: {},
      state: '',
      eqlistIndex: 0,
      oee: 0,
    }
  },
  props: {
    time: {
      type: String,
      default: '',
    },
  },
  computed: {},
  watch: {
    eqname(val) {
      this.eqList.forEach((item) => {
        if (item.name == val) {
          item['isRuning'] = true
        } else {
          item['isRuning'] = false
        }
      })
    },
  },

  created() {
    this.getData()
  },
  mounted() {
    let i = 1
    this.timeInterval = setInterval(() => {
      this.eqDetail = this.eqList[i]
      this.eqname = this.eqList[i]['name']
      this.sname = this.eqList[i]['sname']
      this.description = this.eqList[i]['description']
      this.state = this.getState(this.eqList[i]['state'])
      this.oee = this.eqList[i]['week_oee']
      i++
      if (i >= this.eqList.length) {
        i = 0
      }
      this.eqlistIndex = i
    }, 1000 * 10)
    // setInterval(() => {
    //   this.getData()
    // }, 1000 * 60 * 60 * 20)
  },
  // 60000
  methods: {
    getState(val) {
      let state = ''
      switch (val) {
        case '运行':
          state = '0.9'
          break
        case '待机':
          state = '0.7'
          break
        case '停机':
          state = '0.5'
          break
        case '维修':
          state = '0.3'
          break
        case '封存':
          state = '0.1'
          break
        default:
          ''
      }
      return state
    },
    selectColor(val) {
      switch (val) {
        case '运行':
          return '#33e32a'
        case '待机':
          return '#ffdf24'
        case '停机':
          return '#177ee5'
        case '维修':
          return '#ff000c'
        case '封存':
          return '#aaa'
        default:
          ''
      }
    },
    getData() {
      const that = this
      const header = {}
      header['report.tableid'] = 'bne_chart_device'
      const params = {
        _params: JSON.stringify(header),
        // '@params': JSON.stringify(header),
        _conditions: {},
        // pageSize: 40,
        pageIndex: -1,
        sortField: '',
        sortOrder: '',
      }
      sysQuery(params)
        .then((res) => {
          that.eqList = res.data ? res.data : []
          that.eqname = res.data ? res.data[0].name : ''
          that.sname = res.data ? res.data[0].sname : ''
          that.description = res.data ? res.data[0].description : ''
          that.state = res.data ? res.data[0].state : ''
          that.eqDetail = res.data ? res.data[0] : null
          that.state = that.getState(res.data[0].state)
          that.oee = res.data ? res.data[0]['week_oee'] : 0
        })
        .catch(() => {
          that.$message.error('数据请求失败，请联系管理员！')
        })
    },
    destroyed() {
      clearInterval(this.timeInterval)
      this.timeInterval = null
    },
  },
}
</script>

<style lang="less" scoped>
.appp {
  font-family: 'MicrosoftYaHei', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #fff;
  padding: 15px;
  box-sizing: border-box;
  /* margin-top: 60px; */
}
.bnr-con {
  height: 90vh;
  margin-left: 15px;
  margin-right: 15px;
  margin-top: 1vh;
}
.bnr-head {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
  margin: 15px 15px;
  box-sizing: border-box;
  height: 10vh;
  .wx-head-con {
    flex: 1;
    border-radius: 4px;
    height: 100%;
    padding: 15px;
    margin-right: 15px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    .left {
      width: 100px;
      font-size: 38px;
    }
    .right {
      flex: 1;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-direction: column;
      flex-wrap: nowrap;
      .num {
        font-size: 24px;
        margin-bottom: 1px;
        letter-spacing: 1px;
      }
      .title {
        font-size: 14px;
        color: #ccc;
      }
    }
  }
}
.icon2 {
  .px2vh(padding-right, 10);
}
.left {
  padding: 0px 15px;
  .px2vh(line-height, 44);
  text-align: left;
  .px2font(13);
  .anticon {
    .px2font(20);
    vertical-align: middle;
  }
}
.tit {
  .px2font(17);
  .px2vw(padding-top, 10);
  .px2vh(padding-left, 15);
  letter-spacing: 2px;
  text-align: left;
}
.runing {
  font-weight: bold;
  // background: rgba(51, 204, 255, 0.6);
  border: 1px solid #07d7ca;
  // box-shadow: inset 0px 0px 20px 0px rgba(2, 187, 124, 0.5);
  // box-shadow: inset 0px 0px 20px 0px rgba(51, 204, 255, 0.5);
  box-shadow: inset 0px 0px 20px 0px rgba(39, 255, 242, 0.5);
  .anticon {
    color: #27fff2 !important;
  }
  span {
    color: #27fff2 !important;
  }
}
.up {
  height: 51vh;
}
.down {
  height: 37vh;
  box-sizing: border-box;
  margin-top: 2vh;
}
.table-bg {
  background: url('./assets/images/bk2.png');
  background-size: 100% 100%;
  height: 37vh;
}
.name {
  .px2vh(margin-top, 50);
  .px2vw(padding-left, 25);
  .px2vw(padding-right, 0);
  text-align: left;
  p {
    .px2vh(line-height, 36);
  }
  span {
    color: #ddd;
    .px2font(15);
  }
  .hwname {
    color: #67e0e3;
    white-space: nowrap;
    .px2font(17);
    letter-spacing: 1px;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}

.eqname {
  position: absolute;
  right: 5%;
  top: 5%;
  color: #1ed3e5;
}
</style>
